<!--
     Multiplication table visualizer
-->
<html>
   <head>
      <title>Multtable Visualizer</title>

      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta name="GE3-GITVersion" content="3.4.0">

      <link rel="icon" type="image/png" href="./images/favicon.png"></link>
      <link rel="stylesheet" href="./style/fonts.css" type="text/css"></link>
      <link rel="stylesheet" href="./style/sliders.css" type="text/css"></link>
      <link rel="stylesheet" href="./visualizerFramework/visualizer.css" type="text/css"></link>
      <link rel="stylesheet" href="./style/menu.css" type="text/css"></link>
      <link rel="stylesheet" href="./style/SubsetHighlightController.css" type="text/css"></link>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
       .graphic-lead {
          margin-top: 1.5em;
          margin-bottom: 0.5em;
       }

       #table-control {
           padding: 0.2em;
       }

       #coloration-choice > div {
          margin-left: 5%;
       }
      </style>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="./refreshVersion.js"></script>
      <script type="module">
       import {check} from './js/Migration.js'
       import {load} from './Multtable.js'
       window.addEventListener('load', () => check().then(load))
      </script>
   </head>
   <body>
      <div id="bodyDouble">
         <div id="header">
             <div id="heading"></div>
         </div>
         <div id="graphic">
            <template id="drag-image-template">
               <img id="drag-image" src="${Multtable_View.canvas.toDataURL()}" class="remove-on-clean" swapping="${swapping}"
                    start="${start}" style="${style}">
            </template>

            <template id="node-label-template">
               <div id="node-label" class="tooltip remove-on-clean" row="${rowXcol.row}" col="${rowXcol.col}">
                  ${Group.representation[element]}
               </div>
            </template>

            <div id="controls">
                <div id="options">
                    <button id="subset-button"
                            onclick="$('#control > *').hide(); $('#subset-control').show()">Subsets</button>
                    <button id="table-button"
                            onclick="$('#control > *').hide(); $('#table-control').show()">Table</button>
                </div>

                <div id="control">
                    <div id="subset-control">
                        <!-- This is filled in by subsetDisplay/subsets.html -->
                    </div>

                    <div id="table-control" class="hidden">
                        <div class="graphic-lead">Organize by subgroup:</div>
                        <div id="organization-select" class="faux-select"
                             onclick="$('#organization-choices').toggle(); event.stopPropagation()">
                            <div class="faux-select-arrow" ></div>
                            <span id="organization-choice" class="faux-select-value"></span>
                            <ol id="organization-choices" class="faux-select-options display-none-on-clean"></ul>
                        </div>
                        <template id="organization-choice-none-template">
                            <span data-subgroup-index="0">none</span>
                        </template>
                        <template id="organization-choice-template">
                            <span data-subgroup-index="${subgroupIndex}">
                                <i>H</i><sub>${subgroupIndex}</sub>, a subgroup of order ${subgroup.order}.
                            </span>
                        </template>

                        <div class="graphic-lead" style="margin-top: 3em">Separate cosets by:</div>
                        <input id="separation-slider" type="range" min="0" max="100" value="0"> <!-- [0-100] => [0,box width] -->

                        <form id="coloration-choice" class="graphic-lead" style="margin-bottom: 0">
                            Default coloration:
                            <div>
                                <input id="rainbow" name="coloration" type="radio" checked>
                                <label for="rainbow">Spectrum/rainbow</label>
                            </div>
                            <div>
                                <input id="grayscale" name="coloration" type="radio">
                                <label for="grayscale">Grayscale</label>
                            </div>
                            <div>
                                <input id="none" name="coloration" type="radio">
                                <label for="none">None</label>
                            </div>
                        </form>

                        <form id="color-order-choice" class="graphic-lead" type="radio" style="margin-bottom: 0">
                            Element coloring on reorganization:
                            <div>
                                <input id="color-order-top-row-fixed" name="color-order" type="radio" checked>
                                <label for="color-order-top-row-fixed">Top row colors don't change</label>
                            </div>
                            <div>
                                <input id="color-order-element-colors-fixed" name="color-order" type="radio">
                                <label for="color-order-element-colors-fixed">Element colors don't change</label>
                            </div>
                        </form>                   
                    </div>
                </div>
            </div>
         </div>
      </div>
   </body>
</html>
